<template>
  <div class="app-container">
    <div class="container-bg">
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form
            style="margin-top: 20px"
            :model="tab5form"
            ref="ruleForm"
            label-width="150px"
            :rules="rules"
          >
            <!-- <el-col :span="18">
                <el-form-item label="门禁类型" prop="online">
                <el-select
                  v-model="tab5form.online"
                  @change="handleSelectChange"
                  type="number"
                  placeholder="请选择"
                  >
                  <el-option label="云门禁" :value="1"></el-option>
                  <el-option label="PC门禁" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="18">
              <el-form-item label="门禁类型" prop="online">
                <el-radio-group v-model="tab5form.online">
                    <el-radio :label="1">云门禁</el-radio>
                    <el-radio :label="0">PC门禁</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col> -->
            <el-col :span="18">
              <el-form-item label="服务器地址" prop="addr">
                <el-input
                  v-model="tab5form.addr"
                  placeholder="请输入服务器地址"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="端口" prop="port">
                <el-input-number
                  class="textleft"
                  v-model="tab5form.port"
                  controls-position="right"
                  :min="200"
                  :max="65535"
                  label="请输入端口"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="tls验证" prop="mqttTls">
                <el-select
                  v-model="tab5form.mqttTls"
                  type="number"
                  placeholder="请选择"
                  >
                  <el-option label="启用" :value="1"></el-option>
                  <el-option label="关闭" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="设备sn码" prop="deviceCode">
                <el-input
                  v-model="tab5form.deviceCode"
                  placeholder="请输入设备sn码"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="用户名" prop="mqttUsername">
                <el-input
                  v-model="tab5form.mqttUsername"
                  placeholder="请输入用户名"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="密码" prop="mqttPassword">
                <el-input
                  v-model="tab5form.mqttPassword"
                  placeholder="请输入密码"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="设备密匙" prop="deviceSecret">
                <el-input
                  v-model="tab5form.deviceSecret"
                  placeholder="请输入设备密匙"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="产品密匙" prop="productKey">
                <el-input
                  v-model="tab5form.productKey"
                  placeholder="请输入产品密匙"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="mqttId" prop="mqttClientId">
                <el-input
                  v-model="tab5form.mqttClientId"
                  placeholder="请输入mqttId"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="minioId" prop="minioId">
                <el-input
                  v-model="tab5form.minioId"
                  placeholder="请输入minioId"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="minioSecret" prop="minioSecret">
                <el-input
                  v-model="tab5form.minioSecret"
                  placeholder="请输入minioSecret"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18" v-if="isAdmin">
              <el-form-item size="large">
                <el-button type="primary" @click="onSubmit('ruleForm')">保存</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form
            style="margin-top: 20px"
            element-loading-text="Loading"
            v-loading="tableLoading"
            :model="pluginform"
            id="pluginform"
            label-width="150px"
          >
            <el-col :span="18">
              <el-form-item label="插件名称" prop="plugins_name">
                <el-input
                  v-model="pluginform.plugins_name"
                  class="color000"
                  :disabled="true"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="插件版本" prop="plugins_version">
                <el-input
                  v-model="pluginform.plugins_version"
                  class="color000"
                  :disabled="true"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="网络连接状态" prop="socket_state">
                <el-input
                  v-model="pluginform.socket_state"
                  class="color000"
                  :disabled="true"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="错误信息" prop="error_msg">
                <el-input
                  v-model="pluginform.error_msg"
                  class="color000"
                  :disabled="true"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="最后上传时间" prop="last_upload_time">
                <el-input
                  v-model="pluginform.last_upload_time"
                  class="color000"
                  :disabled="true"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="插件启动时间" prop="plugins_load_time">
                <el-input
                  v-model="pluginform.plugins_load_time"
                  class="color000"
                  :disabled="true"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item size="large">
                <el-button type="primary" plain icon="el-icon-refresh" @click="getPlugin2Api">刷新</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import {getFourthpartyApi, setFourthpartyApi} from "@/api/network";
  import axios from 'axios';
  import { getToken } from "@/utils/auth";
  import Cookies from "js-cookie";
  import $ from 'jquery';

  export default {
    name: "MvCloudgateTerminalThirdPlatform",

    data() {
      var validatePort = (rule, value, callback) => {
        if (value === "") {
          callback(new Error('端口不能为空'));
        } else {
          if (!(value >= 1 && value <= 65535)) {
            callback(new Error('端口须在1-65535之间'));
          }
          callback();
        }
      };
      return {
        activeValue: 0,
        inactiveValue: 1,
        isAdmin:false,
        formPrev: {},
        tableLoading:false,
        tab5form: {
          addr: null,
          port: "",
          online: "",
          mqttTls: "",
          deviceCode: "",
          mqttUsername: "",
          mqttPassword: "",
          deviceSecret: "",
          productKey: "",
          mqttClientId: "",
          minioId: "",
          minioSecret: "",
        },
        pluginform: {
          plugins_name: "",
          plugins_version: "",
          socket_state: "",
          login_state: "",
          error_msg: "",
          last_upload_time: "",
          plugins_load_time: ""
        },
        rules: {
          addr: [
            {required: true, message: "服务器地址不能为空", trigger: "blur"},
            {max: 128, message: "服务器地址不能超过128位", trigger: "blur"},
          ],
          port: [
            {required: true, message: "端口不能为空", trigger: "blur"},
            { validator: validatePort, trigger: 'blur' },
            { pattern:/^[0-9]*$/, trigger: "blur", message: '请输入正整数' },
          ],
          deviceCode: [
            {required: true, message: "设备sn码不能为空", trigger: "blur"},
            {max: 128, message: "设备sn码不能超过128位", trigger: "blur"},
          ],
          mqttUsername: [
            {required: true, message: "用户名不能为空", trigger: "blur"},
            {max: 128, message: "用户名不能超过128位", trigger: "blur"},
          ],
          mqttPassword: [
            {required: true, message: "密码不能为空", trigger: "blur"},
            {max: 128, message: "密码不能超过128位", trigger: "blur"},
          ],
          deviceSecret: [
            {required: true, message: "设备密匙不能为空", trigger: "blur"},
            {max: 128, message: "设备密匙不能超过128位", trigger: "blur"},
          ],
          productKey: [
            {required: true, message: "产品密匙不能为空", trigger: "blur"},
            {max: 128, message: "产品密匙不能超过128位", trigger: "blur"},
          ],
          mqttClientId: [
            {required: true, message: "mqttId不能为空", trigger: "blur"},
            {max: 128, message: "mqttId不能超过128位", trigger: "blur"},
          ],
          minioId: [
            {required: true, message: "minioId不能为空", trigger: "blur"},
            {max: 128, message: "minioId不能超过128位", trigger: "blur"},
          ],
          minioSecret: [
            {required: true, message: "minioSecret不能为空", trigger: "blur"},
            {max: 128, message: "minioSecret不能超过128位", trigger: "blur"},
          ],
        }
      };
    },
    created() {
      this.getPluginApi();
      this.getPlugin2Api();
    },
    mounted() {
      this.$nextTick(()=>{
        this.isAdmin=Cookies.get('roleId')=='0'?true:false
      })
    },
    methods: {
      handleSelectChange() {
        this.$forceUpdate()
      },
      getPluginApi: function() {
        let self = this;
        axios({
          headers: {
            Authorization: "Bearer " + getToken()
          },
          method: "post",
          url: "http://"+location.hostname+"/params/",
          timeout: 10000,
          data: {
            method: 'get_plugins_config',
            params: {}
          }
        }).then(res=>{
          console.log(295,res);
          if (res.statusText == 'OK') {
            self.tab5form = res.data;
            self.tab5form.online = (!res.data.online && res.data.online != 0) ? 0 : res.data.online;
            self.formPrev = JSON.parse(JSON.stringify(res.data));
            console.log(156,self.tab5form);
          }
        },err =>{
          console.log(err)
        })
        .catch(error =>{
          console.log(error);
        })
      },
      getPlugin2Api: function() {
        this.tableLoading = true;
        let self = this;
        setTimeout(function () {
          axios({
            headers: {
              Authorization: "Bearer " + getToken()
            },
            method: "post",
            url: "http://"+location.hostname+"/params/",
            timeout: 10000,
            data: {
              method: 'get_plugin_status',
              params: {}
            }
          }).then(res=>{
            console.log(348,res);
            if (res.data != 'error') {
              self.pluginform = res.data.params;
              self.pluginform.socket_state = self.pluginform.socket_state == 0 ? '成功' : '失败';
            }
            self.tableLoading = false;
          },err =>{
            console.log(err)
            self.tableLoading = false;
          })
          .catch(error =>{
            console.log(error);
            self.tableLoading = false;
          })
        }, 100);
      },
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          console.log(valid, 'valid')
          if (valid) {
            this.tab5form.port = this.tab5form.port*1;

            axios({
              headers: {
                Authorization: "Bearer " + getToken()
              },
              method: "post",
              url: "http://"+location.hostname+"/params/",
              timeout: 10000,
              data: {
                method: 'set_plugins_config',
                params: this.tab5form
              }
            }).then(res=>{
              // console.log(184,res);
              if (res.statusText == 'OK') {
                this.$message.success("保存成功");
              } else {
                this.$message.error("保存失败");
              }
            },err =>{
              console.log(err)
            })
            .catch(error =>{
              console.log(error);
            })

            console.log(391, this.formPrev, this.tab5form);
            // if (JSON.stringify(this.formPrev) === JSON.stringify(this.tab5form)) {
            //   return false;
            // } else {
              this.formPrev = JSON.parse(JSON.stringify(this.tab5form));
              let self = this;
              setTimeout(function () {
                axios({
                  headers: {
                    Authorization: "Bearer " + getToken()
                  },
                  method: "post",
                  url: "http://"+location.hostname+"/params/",
                  timeout: 10000,
                  data: {
                    method: 'restart_plugin',
                    params: {}
                  }
                }).then(res=>{
                  console.log(408,res);
                  if (res.data == 'ok') {
                    // self.$message.success("操作成功");
                  } else {
                    // self.$message.error("操作失败");
                  }
                },err =>{
                  console.log(err)
                })
                .catch(error =>{
                  console.log(error);
                })
              }, 1000);
            }
            // }
        });
      }

    },
  };
</script>

<style lang="scss" scoped>
    .container-bg {
      max-width: 1600px;
    }
    .textleft {
      width: 100%;
    }
    /deep/ .el-loading-mask {
      margin-top: 40%;
    }
    /deep/ .textleft .el-input--medium input {
      text-align: left;
    }
    /deep/ .el-select {
      width: 100%;
    }
    /deep/ .el-input.is-disabled .el-input__inner {
      color: #000 !important;
    }
</style>
